<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>财务中心</el-breadcrumb-item>
      <el-breadcrumb-item>提成分配</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/commisssion' }"
        >人员提成统计</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="commission-page">
      <div class="title">人员提成统计</div>
      <div class="content-box">
        <div class="right">
          <el-form
            ref="ruleFormRef"
            :inline="true"
            :model="formInline"
            style="width: 100%;display: flex;flex-wrap: wrap;"
          >
            <div class="choice-list">
              <el-form-item class="choice-item" label="选择日期:">
                <el-date-picker
                  v-model="formInline.detailTime"
                  type="date"
                  placeholder="请选择日期"
                  :suffix-icon="CaretBottom"
                />
              </el-form-item>
              <el-form-item class="choice-item" label="姓名/账号：" prop="name">
                <el-select
                  v-model="formInline.name"
                  placeholder="请输入姓名/账号"
                >
                  <el-option
                    v-for="i in peopleOptions"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value"
                  />
                </el-select>
              </el-form-item>
              <div class="choice-item df" style="min-width: 170px;">
                <el-button round :icon="Search" color="#0071bb">搜索</el-button>
                <el-button round :icon="RefreshLeft">重置</el-button>
              </div>
              <div class="choice-item-right">
                <el-button round color="#0071bb">导出报表</el-button>
              </div>
            </div>
          </el-form>
          <div class="tables-box b-1">
            <el-table height="66vh" :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="role" label="账号" />
              <el-table-column prop="bMoney" label="提成设备数" />
              <el-table-column prop="xMoney" label="总成交笔数" />
              <el-table-column prop="xMoney" label="总成交额" />
              <el-table-column prop="AMoney" label="总提成" />
              <el-table-column prop="check" label="详情">
                <template #default>
                  <div class="check-text">查看</div>
                </template>
              </el-table-column>
            </el-table>
            <div class="page_number">
              <el-pagination
                v-model:current-page="pager.currentPage"
                v-model:page-size="pager.pageSize"
                layout="prev, pager, next, jumper,total"
                :total="pager.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
        <div class="left">
          <div class="choice-list">
            <div style="margin-bottom: 10px">
              <span>提成明细</span>
              <span style="color: #0071bb">13306236880 - 2024年 - 04月</span>
            </div>
            <el-button style="margin-bottom: 10px" round color="#0071bb"
              >导出个人报表</el-button
            >
          </div>
          <div class="tables-box">
            <el-table height="66vh" :data="tableData2" style="width: 100%">
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="role" label="设备名称" />
              <el-table-column prop="bMoney" label="设备编号" />
              <el-table-column prop="xMoney" label="设备类型" />
              <el-table-column prop="AMoney" label="成交笔数" />
              <el-table-column prop="xMoney" label="成交额" />
              <el-table-column prop="AMoney" label="提成" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { CaretBottom, Search, RefreshLeft } from "@element-plus/icons-vue";
const peopleOptions = ref([
  {
    label: "角色1",
    value: 1,
  },
  {
    label: "角色2",
    value: 0,
  },
]);
const formInline = ref({
  detailTime: "",
  name: 1,
});
const tableData = [
  {
    id: "1",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "2",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "3",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
  {
    id: "4",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
];
const tableData2 = [
  {
    id: "1",
    name: "小张",
    role: "超级管理员",
    bMoney: "12.00",
    xMoney: "1.00",
    AMoney: "14.00",
  },
];
// 分页
const pager = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
}); // 改变pageSize
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.commission-page {
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;

  .title {
    font-size: 16px;
    color: #000;
    padding: 10px;
  }
  .df{
    display: flex;
  }
  .dfw{
    display: flex;
    flex-wrap: wrap;
  }
  .content-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      width: 50%;
    }
    .left {
      width: 50%;
      padding: 0px 10px;
    }
    .tables-box {
      height: 74vh;
      padding: 0px 10px;
    }
    .b-1 {
      border-right: 1px solid #ccc;
    }
  }
  :deep() {
    .choice-list {
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      height: 62px;

      .choice-item {
        width: 26%;
        margin-bottom: 10px !important;
      }
      .el-form-item__label {
        font-size: 12px !important;
        width: 84px !important;
      }
      .el-form-item {
        margin-right: 0px !important;

        .el-form-item__content {
          width: 100% !important;
        }
      }
      .choice-item-right {
        width: 15%;
        text-align: right;
        margin-bottom: 10px !important;
      }
    }
  }

  .check-text {
    color: #0071bb;
    cursor: pointer;
  }
}
</style>
